<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="Cache-Control" content="max-age=3600">
    <title>Lite Map</title>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?ak=Ir7z3sSO2Lhwg0AprFzCzWd1VWP2Y9kZ&type=lite&v=1.0"></script>
    <style type="text/css">
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Times New Roman, serif;
}
#map_container {
    height: 100%;
    width: auto;
}
#control {
    position: absolute;
    bottom: 15px;
}
.button {
    margin: 5px;
    padding: 13px 23px;
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
    font: 16px/14px Tahoma, Verdana, sans-serif;
    text-align: center;
    color: #fefefe;
    background: #1e90ff;
}
.popup {
    z-index: 1;
    position: absolute;
    text-align: center;
    border: none;
    text-align: center;
    width: 100%;
    height: 60px;
    font: 16px/60px Tahoma, Verdana, sans-serif;
    box-shadow: 0 10px 14px rgba(0, 0, 0, 0.4);
    color: #fefefe;
    background: #1e90ff;
}

    </style>
</head>
<body>
<div class="popup">点击Marker显示信息</div>
<div id="map_container"></div>
<div id="control">
    <div onclick="addMarker()" class="button">添加海量覆盖物</div>
    <div onclick="removeMarker()" class="button">删除海量覆盖物</div>
</div>
</body>
</html>
<script type="text/javascript">

/* 注释中添加globals描述变量为代码规范 对功能没有影响 */
/* globals BMap */

// 本示例演示添加多个海量覆盖物的使用方法,和Marker覆盖物主要区别是：
// 此覆盖物可支持上千个数量的覆盖物，性能还能保持流畅

var liteMap = new BMap.Map('map_container');
var pt = new BMap.Point(116.404, 39.915);
liteMap.centerAndZoom(pt, 12);
liteMap.addControl(new BMap.ZoomControl());

var h5Port;
var index=0
var length=0
var arrFeatures = [];
window.addEventListener('message', function (event) {
    if (event.data === '__init_port__') {
        if (event.ports[0] !== null) {
            h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
            h5Port.onmessage = function (event) {
              // 2. 接收ets侧发送过来的消息.
              var msg = 'Got message from ets:';
              var result = event.data;
              if (typeof(result) === 'string') {
                console.info(`received string message from html5, string is: ${result}`);
                var result_=JSON.parse(result)

                for (var i = 0; i < result_.length; i ++) {
                    // 初始化位置
                    var mpt = new BMap.Point(result_[i].lng,result_[i].lat);
                    // 变换icon
                    var iconOffsetX = 42;
                    var iconOffsetY = 66;

                    var massFeature = new BMap.MassFeature(mpt, {data: result_[i].place});
                    arrFeatures.push(massFeature);
                }
                 liteMap.centerAndZoom(new BMap.Point(result_[0].lng, result_[0].lat), 6);
                 liteMap.addMassFeatures(arrFeatures);
              }
            }
        }
    }
})

</script>